/* 弹性盒子（传入null不设置该属性） */
@mixin box-flex($width: 100%,
    $height: 100%,
    $direction: row,
    $justify: center,
    $align: center,
    $flex-wrap: null,
    $flex-1: null) {
    @if $width {
        width: $width;
    }

    @if $height {
        height: $height;
    }

    @if $direction {
        flex-direction: $direction;
    }

    @if $justify {
        justify-content: $justify;
    }

    @if $align {
        align-items: $align;
    }

    @if $flex-wrap {
        flex-wrap: $flex-wrap;
    }

    @if $flex-1 {
        flex: $flex-1;
        overflow: hidden;
    }

    display: flex;
}

/* 绝对定位  参数顺序：上右下左 */
@mixin box-absolute($width: null,
    $height: null,
    $top: null,
    $right: null,
    $bottom: null,
    $left: null,
    $zIndex: 1) {
    @if $width {
        width: $width;
    }

    @if $height {
        height: $height;
    }

    @if $left {
        left: $left;
    }

    @if $left {
        left: $left;
    }

    @if $right {
        right: $right;
    }

    @if $top {
        top: $top;
    }

    @if $bottom {
        bottom: $bottom;
    }

    @if $zIndex {
        z-index: $zIndex;
    }

    position: absolute;
}

/* 文本格式化，超出范围，显示省略号 */
@mixin text-overflow($width: 100%, $display: block) {
    display: $display;
    width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}